<!DOCTYPE html>
<html lang="en">

<head>
  {% include 't_head.html' %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js" integrity="sha512-aMGMvNYu8Ue4G+fHa359jcPb1u+ytAF+P2SCb+PxrjCdO3n3ZTxJ30zuH39rimUggmTwmh2u7wvQsDTHESnmfQ==" crossorigin="anonymous">
  </script>
</head>

<body>
<!-- Model View - start -->
<div class="modal fade" id="ModalZoomedView">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Zoomed Console Output</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- Modal Header -->

      <!-- Modal body -->
      <div class="modal-body">

          <div class="col-sm-12">
            
            <textarea id=zoomed_console_output 
                      name=zoomed_console_output></textarea>
          </div>

      </div> 
      <!-- Modal body -->

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
      <!-- Modal footer -->

      </div>
    </div>
  </div>
<!-- Model View - end -->



  <div class="d-flex" id="wrapper">
    <!-- Sidebar -->
    {% include 't_sidebar.html' %}

    <!-- Page Content -->
    <div id="page-content-wrapper">

      <!-- Navbar -->
      {% include 't_navbar.html' %}

      <!-- 2 textarea side by side -->
      <div class="container-fluid">
        <br>


        <div class="row">
          <div class="col-sm-12">
            <h2>Check Console Output&nbsp;&nbsp;🖥</h2>
          </div>

        </div> <!-- row -->
        <div class="border-top my-3"></div>
        <center>
          <a role="button" 
             href="/reset_console_logs?redirect=/console_output" 
             class="btn btn-danger">
             Reset Console Output
          </a>
          <button class="btn btn-success" id="save_output">
          Save Console Output
          </button>
        </center>
        <br>
        <div class="row">
          <div class="col-sm-6">
            <h3 align=center>Call Stack Hooked methods
              <button 
                data-toggle="modal" 
                data-target="#ModalZoomedView" 
                data-console-id="call_stack"
                class="btn btn-primary btn-sm">
                Zoom
              </button>
            </h3>
            <br>
            <textarea id=calls_stack name=console_output
              class="form-control">{{ called_console_output_str|safe }}</textarea>
          </div>

          <div class="col-sm-6">
            <h3 align=center>I/O Hooked methods
              <button 
                 data-toggle="modal" 
                 data-target="#ModalZoomedView"
                 data-console-id="hook_stack"
                 class="btn btn-primary btn-sm">
                 Zoom
              </button>
            </h3>
              <br>
            <textarea id=hooks_stack name=console_output
              class="form-control">{{ hooked_console_output_str|safe }}</textarea>
          </div>
        </div>
        <br>
        <div class="row">
          <div class="col-sm-12">
            <h3 align=center>
              Global Console Output
              <button 
                 data-toggle="modal" 
                 data-target="#ModalZoomedView" 
                 data-console-id="global_console"
                 class="btn btn-primary btn-sm">
                 Zoom
              </button>
            </h3>
              <br>
            <textarea id=global_console_output name=console_output
              class="form-control">{{ global_console_output_str|safe }}</textarea>
          </div>
        </div> <!-- row -->

      </div>
    </div>
    <!-- /#container-fluid -->

  </div>
  <!-- /#page-content-wrapper -->

  </div>
  <!-- /#wrapper -->

  <!-- Javascript loading -->
  {% include 't_js_script.html' %}

  {% block scripts %}
  <script>
    // Console Output TAB
        var calls_stack_editor = CodeMirror.fromTextArea(calls_stack, {
            lineNumbers: true,
            mode: 'javascript',
            theme: 'dracula',
            readOnly: true
        });
        calls_stack_editor.setSize("100%",620);
    
        var hooks_stack_editor = CodeMirror.fromTextArea(hooks_stack, {
            lineNumbers: true,
            mode: 'javascript',
            theme: 'dracula',
            readOnly: true
        });
        hooks_stack_editor.setSize("100%",620);
    
        var global_console_editor = CodeMirror.fromTextArea(global_console_output, {
            lineNumbers: true,
            mode: 'javascript',
            theme: 'dracula',
            readOnly: true
        });
        global_console_editor.setSize("100%",300);

        var zoomed_console_editor = CodeMirror.fromTextArea(zoomed_console_output, {
            lineNumbers: true,
            mode: 'javascript',
            theme: 'dracula'
        });
        zoomed_console_editor.setSize("100%",500);
  </script>


  <script>

    //Set cursors always at the bottom 
    global_console_editor.setCursor(global_console_editor.lineCount(), 0)
    hooks_stack_editor.setCursor(hooks_stack_editor.lineCount(), 0)
    calls_stack_editor.setCursor(calls_stack_editor.lineCount(), 0)

    //const socket = io.connect('//' + document.domain + ':' + location.port + '/console');
    const socket = io.connect()

    socket.on('call_stack', function(msg) {
        if(msg.data.length) {
          calls_stack_editor.setValue(calls_stack_editor.getValue()+msg.data);
          calls_stack_editor.setCursor(calls_stack_editor.lineCount(), 0)
        }
    });
    socket.on('hook_stack', function(msg) {
        if(msg.data.length) {
          hooks_stack_editor.setValue(hooks_stack_editor.getValue()+msg.data);
          hooks_stack_editor.setCursor(hooks_stack_editor.lineCount(), 0)
        }
    });

    socket.on('global_console', function(msg) {
        if(msg.data.length) {
          global_console_editor.setValue(global_console_editor.getValue()+msg.data);
          global_console_editor.setCursor(global_console_editor.lineCount(), 0)
        }
    });

  </script>

  <!-- Save Console Output -->
  <script>
    $(document).ready(function() {
       $('#save_output').click(function(){
           $.ajax({
           url: "/save_console_logs",
           type: "get",
           success: function(response) {
           if(response.includes("print_done"))
            alert("Console logs stored in:\n"+response.replace("print_done - ",""))
           else
            alert("Error while saving Console logs. \nError info: "+response)
          }
         });
       });
    });
  </script>
  <!-- Save Console Output -->


  <script>

    $('#ModalZoomedView').on('shown.bs.modal', function (e) {
      var console=$(e.relatedTarget).data('console-id');
      var textToCopy=""
        if(console=="call_stack") textToCopy=calls_stack_editor.getValue()
        if(console=="hook_stack") textToCopy=hooks_stack_editor.getValue()
        if(console=="global_console") textToCopy=global_console_editor.getValue()
        zoomed_console_editor.setValue(textToCopy)
        zoomed_console_editor.focus()
        zoomed_console_editor.setCursor(0, 0)
        zoomed_console_editor.refresh()
    })
  </script>

    <!-- Set current Page as active in the NavBar -->
    <script>
      $(document).ready(function () {
        $(".nav li").removeClass("active");
        $('#console_output').addClass('active');
      });
      </script>
    <!-- Set current Page as active in the NavBar -->


  {% endblock %}

</body>

</html>